<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/y2.css">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
    <title>Document</title>
</head>

<body>
    <div class="head-y2">
        <div class="img-y2">
            <a href="search.html">
                <div class="search-y2">
                    <img src="./img/img4-y1.png" alt="">
                    <span>搜索</span>
                </div>
            </a>
        </div>
        <div class="card-y2">
            <div class="card1-y2">
                <img class="picture1-y2" src="./img/img1-y2.png" alt="">
                <img class="picture2-y2" src="./img/img2-y2.png" alt="">
            </div>
            <div class="tag-y2">
                <div class="btn-y2 active-y2">
                    国内长线
                </div>
                <div class="btn-y2">
                    郑州周边
                </div>
                <div class="btn-y2">
                    出境长线
                </div>
            </div>
            <div class="tips-y2">
                <div class="fire-y2">
                    <img src="./img/img3-y2.png" alt="">
                    <span>近期热卖2312人报名 每日更新</span>
                </div>
                <div class="arrow-y2">
                    <span>查看完整榜单</span>
                    <img src="./img/img4-y2.png" alt="">
                </div>
            </div>
            <div class="list-y2">
                <ul class="lists-y2">
                    <li>
                        <p class="font1-y2">4-14岁</p>
                        <p class="font2-y2"> 跟团游·亲子休闲·6天5晚 </p>
                        <img src="./img/year1-y2.png"
                            alt="">
                        <p class="font3-y2">坝上草原亲子</p>
                        <p class="p-y2">
                            <span class="font4-y2">￥</span>
                            <span class="font5-y2">4080</span>
                            起
                        </p>
                    </li>
                    <li>
                        <p class="font1-y2">8-16岁</p>
                        <p class="font2-y2"> 跟团游·亲子休闲·5天4晚 </p>
                        <img src="./img/year2-y2.png"
                            alt="">
                        <p class="font3-y2">亲子·童话川西</p>
                        <p class="p-y2">
                            <span class="font4-y2">￥</span>
                            <span class="font5-y2">3780</span>
                            起
                        </p>
                    </li>
                    <li>
                        <p class="font1-y2">4-14岁</p>
                        <p class="font2-y2">跟团游·亲子休闲·6天5晚</p>
                        <img src="./img/year3-y2.png"
                            alt="">
                        <p class="font3-y2">草原爱上沙漠</p>
                        <p class="p-y2">
                            <span class="font4-y2">￥</span>
                            <span class="font5-y2">3680</span>
                            起
                        </p>
                    </li>
                    <li>
                        <p class="font1-y2">5-14岁</p>
                        <p class="font2-y2"> 跟团游·亲子休闲·5天4晚 </p>
                        <img src="./img/year4-y2.png"
                            alt="">
                        <p class="font3-y2">江西美庐行</p>
                        <p class="p-y2">
                            <span class="font4-y2">￥</span>
                            <span class="font5-y2">3380</span>
                            起
                        </p>
                    </li>
                    <div class="mor-y2">
                        <div class="wra-y2">
                            <p class="more11-y2">人气尖货</p>
                            <p class="more22-y2">查看完整榜单 ></p>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </div>
    <div class="box-y2">
        <div class="travel-y2">
            <img class="picture3-y2" src="./img/t-y2.png" alt="">
            <div class="Travelbtn-y2">
                大胆报名 铁定发团
                <img src="./img/img5-y2.png" alt="">
            </div>
            <div class="family-y2">
                <div class="item-y2">
                    <img class="picture4-y2"
                        src="./img/t1-y2.png"
                        alt="">
                    <div class="tip">呼伦贝尔亲子</div>
                </div>
                <div class="item-y2">
                    <img class="picture4-y2"
                        src="./img/t2-y2.png"
                        alt="">
                    <div class="tip">坝上草原亲子</div>
                </div>
                <div class="item-y2">
                    <img class="picture4-y2"
                        src="./img/t3-y2.png"
                        alt="">
                    <div class="tip">泉州深度解锁</div>
                </div>
            </div>
        </div>
        <div class="title-y2">主题玩法</div>
        <ul class="lists1-y2">
        </ul>
        <div class="topp-y2">
            <div class="select-y2">
                <div class="growing-y2 active1-y2">国内长线</div>
                <div class="growing-y2">郑州周边</div>
                <div class="growing-y2">出境长线</div>
            </div>
            <div class="scrolls-y2">
                <div class="option-y2">
                    <div>
                        <span class="name-y2">出发时间</span>
                        <span class="arrowDown-y2"></span>
                    </div>
                    <div>
                        <span class="name-y2">区域</span>
                        <span class="arrowDown-y2"></span>
                    </div>
                    <div>
                        <span class="name-y2">行程天数</span>
                        <span class="arrowDown-y2"></span>
                    </div>
                    <div>
                        <span class="name-y2">主题玩法</span>
                        <span class="arrowDown-y2"></span>
                    </div>
                    <div>
                        <span class="name-y2">适合年龄</span>
                        <span class="arrowDown-y2"></span>
                    </div>
                </div>
            </div>
            <div class="more1-y2">
                <div class="data-y2">
                    <div class="data1-y2">近期出发</div>
                    <div class="data2-y2">
                        <div class="data3-y2">本周活动</div>
                        <div class="data3-y2">下周活动</div>
                    </div>
                </div>
                <div class="data-y2">
                    <div class="data1-y2">出发日期</div>
                    <div class="data2-y2">
                        <div class="data3-y2">9月</div>
                        <div class="data3-y2">10月</div>
                        <div class="data3-y2">11月</div>
                        <div class="data3-y2">12月</div>
                        <div class="data3-y2">26年1月</div>
                        <div class="data3-y2">26年2月</div>
                    </div>
                </div>
                <div class="data-y2">
                    <div class="data1-y2">自定义出行时间</div>
                    <div class="data2-y2">
                        <div class="custom-y2">
                            <div class="wrap-y2">
                                <img src="https://m.youxiake.com/20250903181942/img/calendar.fbd83583.png" alt="">
                                <span>出发时间</span>
                            </div>
                            <div class="cut-y2">→</div>
                            <div class="wrap-y2">
                                <img src="https://m.youxiake.com/20250903181942/img/calendar.fbd83583.png" alt="">
                                <span>出发时间</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="submit">完成</div>
            </div>
            <div class="more2-y2">
                <div class="data2-y2">
                    <div class="data3-y2">西北</div>
                    <div class="data3-y2">内蒙古</div>
                    <div class="data3-y2">东北</div>
                    <div class="data3-y2">川藏渝</div>
                    <div class="data3-y2">新疆</div>
                    <div class="data3-y2">华南</div>
                    <div class="data3-y2">秦晋</div>
                    <div class="data3-y2">华东</div>
                    <div class="data3-y2">华北</div>
                    <div class="data3-y2">华中</div>
                    <div class="data3-y2">西南</div>
                </div>
                <div class="submit">完成</div>
            </div>
            <div class="more3-y2">
                <div class="data2-y2">
                    <div class="data3-y2">1天</div>
                    <div class="data3-y2">2天</div>
                    <div class="data3-y2">3天</div>
                    <div class="data3-y2">4天</div>
                    <div class="data3-y2">5天</div>
                    <div class="data3-y2">6天</div>
                    <div class="data3-y2">7天</div>
                    <div class="data3-y2">8天</div>
                    <div class="data3-y2">9天</div>
                    <div class="data3-y2">9天以上</div>
                </div>
                <div class="submit">完成</div>
            </div>
            <div class="more4-y2">
                <div class="data2-y2">
                    <div class="data3-y2">亲子户外</div>
                    <div class="data3-y2">亲子休闲</div>
                    <div class="data3-y2">独立营</div>
                    <div class="data3-y2">亲子研学</div>
                    <div class="data3-y2">自然教育</div>
                    <div class="data3-y2">亲子课堂</div>
                    <div class="data3-y2">职业体验</div>
                    <div class="data3-y2">游学</div>
                    <div class="data3-y2">农事体验</div>
                    <div class="data3-y2">游侠研学</div>
                </div>
            </div>
            <div class="more5-y2">
                <div class="data2-y2">
                    <div class="data3-y2">2-4岁</div>
                    <div class="data3-y2">5-7岁</div>
                    <div class="data3-y2">8-12岁</div>
                    <div class="data3-y2">13-15岁</div>
                </div>
                <div class="submit">完成</div>
            </div>
        </div>
        <ul class="lists2-y2">
            <li>
                <img class="picture7-y2" src="https://qimg4.youxiake.com/upload/202505/22/0ef1eba38ba45e60.jpg" alt="">
            </li>
        </ul>
    </div>
</body>
<script src="./js/reset.js"></script>
<script>
    const contentsy1 = document.querySelector('.lists1-y2');
    const contentsy2 = document.querySelector('.lists2-y2');
    const tabBtns = document.querySelectorAll('.btn-y2, .growing-y2');
    let currentTagType = 823;

    const filterItems = document.querySelectorAll('.option-y2 > div');
    const morePanels = {
        time: document.querySelector('.more1-y2'),
        area: document.querySelector('.more2-y2'),
        days: document.querySelector('.more3-y2'),
        theme: document.querySelector('.more4-y2'),
        age: document.querySelector('.more5-y2')
    };
    const allMorePanels = Object.values(morePanels);
    const submitBtns = document.querySelectorAll('.submit');


    function showPanel(targetPanel) {
        allMorePanels.forEach(panel => {
            if (panel) panel.style.display = 'none';
        });
        if (targetPanel) targetPanel.style.display = 'block';
    }

    function hideAllPanels() {
        allMorePanels.forEach(panel => {
            if (panel) panel.style.display = 'none';
        });
    }

    function setupSelectionHighlight() {
        allMorePanels.forEach(panel => {
            if (panel) {
                const options = panel.querySelectorAll('.data3-y2');
                options.forEach(option => {
                    option.addEventListener('click', function (e) {
                        e.stopPropagation();
                        const isDateGroup = this.closest('.data-y2') &&
                            this.closest('.data-y2').querySelector('.data1-y2').textContent === '出发日期';
                        if (isDateGroup) {
                            if (this.classList.contains('selected-y2')) {
                                this.classList.remove('selected-y2');
                            } else {
                                this.classList.add('selected-y2');
                            }
                        } else {
                            const siblings = this.parentElement.querySelectorAll('.data3-y2');
                            siblings.forEach(sib => sib.classList.remove('selected-y2'));
    
                            this.classList.add('selected-y2');
                        }
                    });
                });
            }
        });
    }

    function bindFilterClickEvent() {
        if (filterItems.length !== 5) return;

        filterItems[0].addEventListener('click', (e) => {
            e.stopPropagation();
            showPanel(morePanels.time);
        });

        filterItems[1].addEventListener('click', (e) => {
            e.stopPropagation();
            showPanel(morePanels.area);
        });

        filterItems[2].addEventListener('click', (e) => {
            e.stopPropagation();
            showPanel(morePanels.days);
        });

        filterItems[3].addEventListener('click', (e) => {
            e.stopPropagation();
            showPanel(morePanels.theme);
        });

        filterItems[4].addEventListener('click', (e) => {
            e.stopPropagation();
            showPanel(morePanels.age);
        });

        submitBtns.forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                hideAllPanels();
            });
        });

        allMorePanels.forEach(panel => {
            if (panel) {
                panel.addEventListener('click', (e) => {
                    e.stopPropagation();
                });
            }
        });
    }

    function bindGlobalClickEvent() {
        document.body.addEventListener('click', () => {
            hideAllPanels();
        });
    }

    function injectSelectionStyles() {
        const style = document.createElement('style');
        style.textContent = `
            .selected-y2 {
                background: #fff3be !important;
                border: 1px solid #fff3be !important;
            }
        `;
        document.head.appendChild(style);
    }

    function renderHotTheme(data) {
        contentsy1.innerHTML = '';
        if (data && data.hotTheme && data.hotTheme.length > 0) {
            data.hotTheme.forEach(item => {
                contentsy1.innerHTML += `
                    <li>
                        <img class="picture5-y2" src="${item.image}" alt="${item.title}">
                        <img class="picture6-y2" src="./img/img6-y2.png" alt="">
                        <span class="font6-y2">${item.title}</span>
                    </li>
                `;
            });
        } else {
            contentsy1.innerHTML = '<li class="empty">暂无主题玩法数据</li>';
        }
    }

    function renderProductList(tagType) {
        contentsy2.innerHTML = '<li class="loading-y2">加载中...</li>';
        const pages = [1, 2, 3, 4, 5, 6, 7];
        const requests = pages.map(page => {
            const url = `https://m.youxiake.com/api/m/v2/channel/child/flow?querySelectDay=&page=${page}&querySelectStartDate=&queryStartDate=&queryEndDate=&querySelectTheme=&queryArea=&tagType=${tagType}&sitecode=39&querySelectAge=`;
            return fetch(url).then(res => res.json());
        });

        Promise.all(requests).then(responses => {
            contentsy2.innerHTML = '';
            responses.forEach(res1 => {
                if (res1.data && res1.data.data && res1.data.data.list && res1.data.data.list.length > 0) {
                    res1.data.data.list.forEach(item5 => {
                        const dataDetail = item5.dataDetail;
                        if (!dataDetail) return;

                        contentsy2.innerHTML += `
                            <li>
                                <img src="${dataDetail.image || 'https://via.placeholder.com/345x259?text=暂无图片'}" class="bg-y2">
                                <span class="dingwei-y2">${dataDetail.placeLabel || '默认出发'}</span>
                                <div class="bott-y2">
                                    <p class="t-y2">${dataDetail.title || '暂无产品名称'}</p>
                                    ${dataDetail.tagList && dataDetail.tagList.length > 0
                                ? (dataDetail.tagList.includes('爆品') || dataDetail.tagList.includes('新品'))
                                    ? `<p class="bao-y2">${dataDetail.tagList.includes('爆品') ? '爆品' : '新品'}</p>`
                                    : ''
                                : ''}
                                    <div class="gentuan-y2">
                                        <span>${dataDetail.productType || ''}·${dataDetail.productCat || ''}·${dataDetail.days || ''}</span>
                                    </div>
                                    <div class="tag-y2">
                                        ${dataDetail.saleOtherList && dataDetail.saleOtherList.length > 0
                                ? `<div class="two-y2">${dataDetail.saleOtherList[0].detailRemark || ''}</div>`
                                : ''}
                                        ${dataDetail.tagList && dataDetail.tagList.length > 0
                                ? `<div class="two1-y2">${dataDetail.tagList.join('、')}</div>`
                                : ''}
                                    </div>
                                    <div class="bot2-y2">
                                        <div class="txt6-y2">
                                            <span>￥</span>
                                            <span class="txt7-y2">${dataDetail.priceLabel || '0'}</span>
                                            <span>起</span>
                                        </div>
                                        <span class="txt1-y2">${dataDetail.numLabel || '0人已报名'}</span>
                                    </div>
                                </div>
                            </li>
                        `;
                    });
                }
            });
        }).catch(err => {
            console.log(err);
        });
    }

    window.addEventListener('load', () => {
        injectSelectionStyles();
        hideAllPanels();
        bindFilterClickEvent();
        bindGlobalClickEvent();
        setupSelectionHighlight();

        fetch(`https://m.youxiake.com/api/m/v2/channel/child/?sitecode=39&city_id=39`)
            .then(res => res.json())
            .then(res1 => {
                console.log(res1.data);
                renderHotTheme(res1.data);
            })
            .catch(err => {
                console.log(err);
            });
        renderProductList(currentTagType);
    });

    tabBtns.forEach(btn => {
        btn.addEventListener('click', function (e) {
            e.stopPropagation();
            const btnText = this.textContent.trim();
            switch (btnText) {
                case '国内长线':
                    currentTagType = 823;
                    break;
                case '郑州周边':
                    currentTagType = 822;
                    break;
                case '出境长线':
                    currentTagType = 824;
                    break;
                default:
                    currentTagType = 823;
            }

            tabBtns.forEach(item => {
                if (item.textContent.trim() === btnText) {
                    item.classList.add('active1-y2');
                } else {
                    item.classList.remove('active1-y2');
                }
            });

            renderProductList(currentTagType);
        });
    });
</script>
</html>